<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>购物车</title>
</head>
<body>

<div id="app">
  <div class="container">
    <my-cart></my-cart>
  </div>
</div>

<script src="../lib/vue.js"></script>
<script>
  let CartTitle = {
    template: `
      <div title="">我的商品</div>
    `
  }
  let CartList = {
    template: `
      <div>内容列表</div>
    `
  }
  let CartTotal = {
    template: `
      <div class="total">
        <span>总价：123</span>
        <button>结算</button>
      </div>
    `
  }

  Vue.component('my-cart', {
    template: `
      <div>
        <cart-title></cart-title>
        <cart-list></cart-list>
        <cart-total></cart-total>
      </div>
    `,
    components: {
      'cart-title': CartTitle,
      'cart-list': CartList,
      'cart-total': CartTotal
    }
  })

  let vm = new Vue({
    el: '#app',
    data: {
      list: [
        {
          id: 1,
          name: 'TCL彩电',
          price: 1000,
          num: 1,
          img: 'img/a.jpg'
        },
        {
          id: 2,
          name: '机顶盒',
          price: 1000,
          num: 1,
          img: 'img/b.jpg'
        },
        {
          id: 3,
          name: '海尔冰箱',
          price: 1000,
          num: 1,
          img: 'img/c.jpg'
        },
        {
          id: 4,
          name: '小米手机',
          price: 1000,
          num: 1,
          img: 'img/d.jpg'
        },
        {
          id: 5,
          name: 'PPTV电视',
          price: 1000,
          num: 1,
          img: 'img/e.jpg'
        },
      ]
    }
  })
</script>

</body>
</html>